<template>
  <div class="label-count-sort">
    <div class="label">
      <span>共有符合条件的园区</span>
      <span class="text-[#0091FF] mx-1">{{ count }}</span>
      <span>家</span>
    </div>

    <div class="sort">
      <slot name="sort"></slot>
      <slot name="viewMode"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {}
  },
})
</script>
<style lang="scss" scoped>
.label-count-sort {
  @apply flex
          justify-between
          items-center
          h-[56px]
          bg-white
          border-b-[1px]
          rounded-tr-md
          px-[20px]
          border-[#e0e4ed];

  .label {
    @apply text-[#2e2e2e] flex items-center;
  }

  .sort {
    @apply flex
          justify-between
          items-center;
  }
}
</style>
